<script setup lang='ts'>
import { onMounted, ref } from 'vue';

const props = defineProps<{
    btnLeft: number,
    showTop: number
}>()
const isShow = ref(false)
onMounted(() => {
    const dom = document.querySelector('html') as HTMLElement
    document.addEventListener('scroll', (e) => {
        if (dom.scrollTop >= props.showTop - window.innerHeight) {
            isShow.value = true
        } else {
            isShow.value = false
        }
    })
})
const scrollToTop = () => {
    window.scrollTo(0, 0)
}
</script>
<template>
    <div class="palette-btn-wrap" :style="props.btnLeft > 1000 ? `left:${props.btnLeft}px;` : 'right:10px;'">
        <div class="btn-item">
            新版反馈
        </div>
        <div class="btn-item">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-kefu"></use>
            </svg>
            <span>客服</span>
        </div>
        <div class="btn-item">
            推出内测
        </div>
        <Transition enter-active-class="animate__animated animate__fadeIn"
            leave-active-class="animate__animated animate__fadeOut">
            <div class="btn-item" v-show="isShow" @click="scrollToTop">
                <svg class="icon" aria-hidden="true" style="transform:rotate(90deg); color:#000;">
                    <use xlink:href="#icon-left-arrow"></use>
                </svg>
                <span>顶部</span>
            </div>
        </Transition>
    </div>
</template> 
<style lang='less' scoped>
.palette-btn-wrap {
    z-index: 999;
    position: fixed;
    bottom: 30px;
    width: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    font-size: 12px;
    margin-left: 10px;

    .btn-item {
        width: 100%;
        box-sizing: border-box;
        padding: 4px;
        display: flex;
        align-items: center;
        flex-direction: column;
        border-radius: 8px;
        border: 1px solid var(--line_regular);
        margin-bottom: 10px;
        background-color: #fff;

        &:hover {
            background-color: var(--graph_bg_thick);
        }

        .icon {
            font-size: 24px;
        }
    }
}
</style>
